<template>
  <div id="app">
   <div v-for="(page,index) in pages" tabindex="-1"
                :key = "page.name"
                 :id="page.name" 
                class="designer-editor-page"
                :style="bgStyle">
                <div :id="page.name">
                    <designer-component v-for="c in page.components" :target="c" :pageIndex="index" :pageHeight="setting.height" :id="c.name" 
                    :key="c.name">
                        
                    </designer-component>
                </div>
            </div>
  </div>
</template>

<script>
import DesignerComponent from './components/DesignerComponent'
import axios from 'axios'

export default {
  name: 'App',
  data () {
    return {
      name: '测试报表1',
      pages: [{
        name: 'page1',
        components: []
      },
      {
        name: 'page2',
        components: []
      }],
      setting: {
        width: 1366,
        height: 768,
        bgType: 'color',
        backgroundColor: 'rgb(240,240,240)',
        backgroundImage: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516007834500&di=ffd8b9badb4c003725a763f0eb7e396e&imgtype=0&src=http%3A%2F%2Fpic41.nipic.com%2F20140506%2F610812_182641748308_2.jpg',
        auxiliary: 'true',
        auxiliarySize: '20',
        auxiliaryColor: 'rgb(222,222,222)'
      }
    }
  },
  computed: {
        bgStyle: {
            get () {
                let _style = {}
                _style['width'] = this.setting.width + 'px'
                _style['height'] = this.setting.height + 'px'
                if (this.setting.bgType === 'color') {
                    _style['background'] = this.setting.backgroundColor
                }

                if (this.setting.bgType === 'pic') {
                    _style['background'] = 'url(\'' + this.setting.backgroundImage + '\') no-repeat'
                    _style['backgroundSize'] = this.setting.width + 'px ' + this.setting.height + 'px'
                }
                return _style
            }
        }
      },
  components: {
    DesignerComponent
  },
  mounted(){
    console.info(typeof(window.location.href))
    let url=window.location.href
    let arrUrl=url.split('//')
    let params=arrUrl[1].split('/')
    axios.get('http://demo1.avcdata.com/api/v1/shareReport/'+params[1]+'/'+params[2]).then((response)=>{
          console.info(response)
          this.pages=response.data.pages
          this.setting=response.data.setting
        })
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.designer-editor-page{
  outline: none;
}
</style>
